<template>
  <div class="container">
      <headers></headers>
      <router-view></router-view>
      <footers></footers>
      <Player></Player>
      <login></login>
  </div>
</template>

<script setup lang="ts">
import headers from '@/components/headers/index.vue'
import footers from '@/components/footers/index.vue'
import Player from '@/components/Player/index.vue'
import login from '@/components/login/index.vue'
import loginStore from './store/modules/login'
let useLoginStore = loginStore()
import { watch } from 'vue'
const handleScroll = (event: { preventDefault: () => void; stopPropagation: () => void }) => {
      event.preventDefault(); // 阻止默认的滚动行为
      event.stopPropagation(); // 阻止事件冒泡
};
watch(()=>useLoginStore.flag,()=>{
  if(useLoginStore.flag){
    document.body.addEventListener('scroll', handleScroll, { passive: false });
  }else{
    document.body.removeEventListener('scroll', handleScroll);
  }
})
</script>

<style scoped>
.container{
  width: 100%;
  height: 100vh; /* 设置容器高度，保证内容溢出时可以滚动 */
  overflow: auto;
}
</style>